<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
import bus from '../../public/data/bus'
// import EchartsLayer from "../../js/EchartsLayer"
export default {
    data (){
        return {
            map:null,
            hStep:null,
            busLines:null,
            prevPt:null,
            points:[],
            myChart:null
        }
    },
    mounted(){
        // console.log(this.echartslayer)
        this.init()
    },
    methods: {
        init(){
        //   this.myChart = this.$echarts.init(document.getElementById('map'))
          this.smartmapx.mapbase='http://www.smartmapx.com';
          this.smartmapx.apikey='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8'
            this.map=new this.smartmapx.Map({
              container:'map',
              mapId:'fa266a3a-b467-4464-9a0a-bd1cbe6dfc3a',
              center:[116.39738, 39.90579],
              zoom:10,
            })
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                    maxWidth: 100,
                    unit: 'm'
                }));
            this.map.on('load',()=>{
                this.map.addLayer({
                    "id":"bga",
                    "type":"background",
                    "maxzoom":20,
                    "paint":{
                        "background-color":"rgba(0,0,0,0.7)"
                    }
                })
        //     this.hStep = 300 / (bus.length - 1);
        //     var busLines= this.busLines;
        //     busLines = [].concat.apply([], bus.map( (busLine, idx)=> {
        //         for (var i = 0; i < busLine.length; i += 2) {
        //             var pt = [busLine[i], busLine[i + 1]];
        //             if (i > 0) {
        //                 pt = [
        //                     this.prevPt[0] + pt[0],
        //                     this.prevPt[1] + pt[1]
        //                 ];
        //             }
        //             this.prevPt = pt;

        //             this.points.push([pt[0] / 1e4, pt[1] / 1e4]);
        //         }
        //           return {
        //             coords: this.points,
        //             lineStyle: {
        //                 normal: {
        //                     color: echarts.color.modifyHSL('#5A94DF', Math.round(this.hStep * idx))
        //                 }
        //             }
        //         };
        //     }));
        //        var option = {
        //         SmartMap: {
        //             roam: true
        //         },
        //         coordinateSystem: 'SmartMap',
        //         series: [{
        //             type: 'lines',
        //             coordinateSystem: 'SmartMap',
        //             polyline: true,
        //             data: busLines,
        //             silent: true,
        //             lineStyle: {
        //                 normal: {
        //                     // color: '#c23531',
        //                     // color: 'rgb(200, 35, 45)',
        //                     opacity: 0.2,
        //                     width: 1
        //                 }
        //             },
        //             progressiveThreshold: 500,
        //             progressive: 200
        //         }, {
        //             type: 'lines',
        //             coordinateSystem: 'SmartMap',
        //             polyline: true,
        //             data: busLines,
        //             lineStyle: {
        //                 normal: {
        //                     width: 0
        //                 }
        //             },
        //             effect: {
        //                 constantSpeed: 20,
        //                 show: true,
        //                 trailLength: 0.1,
        //                 symbolSize: 1.5
        //             },
        //             zlevel: 1
        //         }]
        //     }
        //    var echartslayer = new EchartsLayer(this.map);
        //     echartslayer.chart.setOption(option);
            // // var echartslayer= new this.$echartslayer(this.map);
            //     this.myChart.setOption(option);
            })
        }
    }
}
</script>
<style scoped>
#map{
    width: 100%;
    height:100%;
}
 .echartMap div {
            position: absolute;
            overflow: auto;
        }
</style>